import React, { Component } from 'react'
import './style.css'

let ht = '400px'
let dis0 = 'inline-block'
let style = {
    box: {
        margin: '40px 0',
        fontSize: '0',
    },
    title: {
        margin: '0',
        border: '1px solid lightgray',
        lineHeight: '60px',
        fontSize: '24px',
    },
    big: {
        display: dis0,
        verticalAlign: 'top',
        width: '600px',
        height: ht,
        border: '1px solid #66ccff',
        fontSize: '16px',
    },
    small: {
        display: dis0,
        verticalAlign: 'top',
        width: '300px',
        height: ht,
        border: '1px solid #66ccff',
        textAlign: 'center',
        fontSize: '16px',
        imgbox: {
            overflow: 'hidden',
            height: '310px',
        },
        img: {
            width: '96%',
        },
        title: {
            height: '30px',
        },
        infor: {
            display: 'block',
            height: '30px',
        },
        price: {
            height: '30px',
            color: 'red',
            fontStyle: 'normal',
        },
    }
}

class Item extends Component {
    constructor(props) {
        super(props)
        this.state = {
            
        }
    }
    componentWillMount() {
        
    }
    render() {
        let {title, big, smalls} = this.props.one
        let {imgs} = this.props
        return <li className="Item" style={style.box}>
            <h3 className="title" style={style.title}>{title}</h3>
            <div className="big" style={style.big}>
                <span>{big}</span>
            </div>
            {smalls.map((v, i) => {
                return <div className="small" key={i} style={style.small}>
                    <div className="imgbox" style={style.small.imgbox}>
                        <img className="hhh" src={imgs[i]} alt={v.img} style={style.small.img}/>
                    </div>
                    <h5 style={style.small.title}>{v.title}</h5>
                    <span style={style.small.infor}>{v.infor}</span>
                    <em style={style.small.price}>{v.price}</em>
                </div>
            })}
        </li>
    }
}

export default Item;